<template>
  <div class="officeSurplus">
    <c-navigation>
      <c-time @change="timeChangeHandler"/>
    </c-navigation>
    <div class="echartsDiv">
      <a-tabs default-active-key="1" @change="tabsChange">
        <a-tab-pane key="1" tab="按出院科室分析">
          <div class="echarts1">
            <p class="legendp"><span>病例数</span><span><i style="background: #5467E6;"></i>结余科室病例数</span>
              <span><i style="background: #E00703;"></i>超支科室病例数</span><span><span
                  class="legendLine"></span>科室累计病例数占比</span></p>
          </div>
          <div class="echarts">
            <div id="echarts1" v-if="chartMount" style="height: 100%;"></div>
            <div class="no-data" v-else>暂无数据</div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="按费用产生科室分析" force-render>
          <div class="echarts1">
            <p class="legendp"><span>结余(万元)</span><span><i style="background: #5467E6;"></i>按费用产生科室统计结余</span>
              <span><i style="background: #FF8D49;"></i>超支科室病例数</span></p>
          </div>
          <div class="echarts">
            <div id="echarts2" v-if="chartMount" style="height: 100%;"></div>
            <div class="no-data" v-else>暂无数据</div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="bottomList" v-if="Departmentshow==1">
      <p>
        <RadioGroup :allLength="allLength" :title="'科室'" :surplusLength="surplusLength"
                    :overspendLength="overspendLength" @listChange="listChange"></RadioGroup>
<!--        <span class="seeDetail">查看各科室收费构成＞</span>-->
      </p>
      <a-table :columns="columnsNum" class="custom" :data-source="dataNum" :pagination="false"
               :rowKey="`${Math.random()}`" :scroll="{ y: '25vh' }">
        <div class="index" slot="dep_code" slot-scope="record, item,index">
          <span type="text" style="margin-right: 10px;color: #6190F7;cursor: pointer"
                @click="seedetail(item)">查看明细</span>
        </div>
      </a-table>
    </div>
    <div class="bottomList" v-else>
      <a-table :columns="columnsFee" class="custom" :data-source="dataFee" :pagination="false"
               :rowKey="`${Math.random()}`" :scroll="{ y: '30vh' }">
      </a-table>
    </div>
  </div>
</template>

<script>
import {barLine, Analysis, CostpProportionList} from "@/api/Department";
import moment from "moment";
import RadioGroup from '@/components/radioGroup.vue'

const echarts = require("echarts")
import columns from "./columns.js";

export default {
  name: 'officeSurplus',
  components: {
    RadioGroup
  },
  data() {
    return {
      columnsNum: [],
      columnsFee: [],
      chartMount:false,
      dataNum: null,
      dataFee: null,
      Departmentshow: 1,
      xData: [],
      DepartmentNum: [],
      Proportion: [],
      surplus: [],
      allList: [],
      surplusList: [],
      overspendList: [],
      surplusLength: null,
      overspendLength: null,
      allLength: null,
      timeParams: {
        year: moment().format('YYYY'),
        month: moment().format('MM')
      }
    }
  },
  created() {
    this.columnsNum = columns.columnsNum
    this.columnsFee = columns.columnsFee
    this.getDepartment();
  },
  mounted() {
    this.getAnalysis()
    this.getCostpProportionList()
  },
  methods: {
    async getDepartment() {
      this.chartMount = false;
      const res = await barLine(this.timeParams);
      this.xData = []
      this.DepartmentNum = []
      this.Proportion = []
      this.countNum = []
      this.surplus = []
      if (res['data']) {
        this.chartMount = true;
        res.data.forEach(element => {
          this.xData.push(element.dep_name)
          this.DepartmentNum.push({
            value: element.countNum,
            itemStyle: {color: element.issurplus == 1 ? '#5467E6' : '#E00703'}
          })
          this.Proportion.push(element.Proportion.toFixed(2))
          this.countNum.push(element.countNum)
          this.surplus.push(element.surplus / 10000)
        })
        this.$nextTick(()=>{
          this.echarts1()
          this.echarts2()
        })
      }
    },
    async getAnalysis() {
      const res = await Analysis(this.timeParams);
      if (res['data']) {
        this.allLength = res.data.length
        this.surplusList = res.data.filter((res) => {
          return res.surplus >= 0
        })
        this.surplusLength = this.surplusList.length
        this.overspendList = res.data.filter((res) => {
          return res.surplus < 0
        })
        this.overspendLength = this.overspendList.length
        this.allList = res.data.map(element => {
          return element
        })
        this.dataNum = this.allList
      }
    },
    async getCostpProportionList() {
      const res = await CostpProportionList(this.timeParams);
      if (res['data']) {
        this.dataFee = res.data.map(element => {
          return element
        })
      }
    },
    listChange(e) {
      if (e == 1) {
        this.dataNum = this.allList
      } else if (e == 2) {
        this.dataNum = this.surplusList
      } else if (e == 3) {
        this.dataNum = this.overspendList
      }
    },
    timeChangeHandler(e) {
      this.timeParams = e;
      this.getDepartment()
    },
    tabsChange(e) {
      this.Departmentshow = e
    },
    echarts1() {
      var myChart = echarts.init(document.getElementById('echarts1'))
      myChart.setOption({
        color: ['#5467E6', '#FF8D49'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          top: '7%',
          bottom: '14%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLine: {
              color: '#BBC1E3',
              show: false
            },
            axisTick: {
              show: false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
            }
          },
          {
            type: 'value',
            min: 0,
            axisLabel: {
              formatter: '{value} %'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
            }
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: true,
          start: 30,
          end: 45,
          xAxisIndex: [0],
          zoomOnMouseWheel: true,
          height: '6%',
          bottom: '3%',
        }],
        series: [
          {
            name: '科室病例数',
            type: 'bar',
            markArea: { //标记区域
              data: [
                [{
                  // name: '事件执行时段',
                  itemStyle: {
                    color: '#F5F7F9'
                  }, //颜色设置
                  yAxis: '0'
                }, {
                  yAxis: '600'
                }]
              ]
            },
            barWidth: 45,
            data: this.DepartmentNum
          },
          {
            name: '科室累计病例数占比',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#FF8D49', //折线颜色
                  width: 3,
                }
              }
            },
            yAxisIndex: 1,
            data: this.Proportion
          }
        ]
      })
    },
    echarts2() {
      var myChart = echarts.init(document.getElementById('echarts2'))
      myChart.setOption({
        color: ['#5467E6', '#FF8D49'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          top: '7%',
          bottom: '14%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisLine: {
              color: '#C2C4D6',
              lineStyle: {
                width: 1//设置线条粗细
              },
              show: true
            },
            axisTick: {
              show: false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
            }
          }
        ],
        dataZoom: [{
          type: 'slider',
          show: true,
          start: 30,
          end: 45,
          xAxisIndex: [0],
          zoomOnMouseWheel: true,
          height: '6%',
          bottom: '3%',
        }],
        series: [
          {
            name: '按费用产生科室统计结余',
            type: 'bar',
            markArea: { //标记区域
              data: [
                [{
                  // name: '事件执行时段',
                  itemStyle: {
                    color: '#F5F7F9'
                  }, //颜色设置

                }, {}]
              ]
            },
            barWidth: 45,
            data: this.surplus
          },
          {
            name: '超支科室病例数',
            type: 'bar',
            barWidth: '10%',
            markLine: {
              symbol: 'none',
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  lineStyle: {
                    type: 'solid',
                    color: '#C2C4D6',
                    width: 1,
                  }
                },
              },
              data: [
                {
                  yAxis: 0
                }
              ]
            },
            data: this.countNum
          }
        ]
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.echartsDiv {
  width: 1680px;
  height: 380px;
  overflow hidden;
  padding: 30px;
  box-sizing: border-box;
  background: #FFFFFF;
  padding-top 10px;
  box-shadow: 0 4px 8px 0 rgba(14, 27, 110, 0.15), 0 2px 4px 0 rgba(14, 24, 101, 0.20);
  border-radius: 12px;
  margin-top 20px;
}

.tabsUl {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #4B82FB;
  line-height: 26px;
}

.tabsUl li {
  border-bottom: none;
  color: #484D78;
  display inline-block;
  margin-right 30px;
}

.tabsUl .active {
  border-bottom: 2px solid #4B82FB;
  color: #4B82FB;
}

.legendp {
  font-size: 12px;
  color: #484D78;
}

.legendp span {
  margin-right: 10px;
}

.legendp span i {
  display inline-block;
  margin-right 5px;
  width: 20px;
  height: 10px;
  border-radius: 4px;
}

.legendLine {
  width: 14px;
  height: 2px;
  background: #FF8D49;
  display inline-block;
  vertical-align middle;
}

.echarts {
  width: 100%;
  height: 270px;
}

.bottomList {
  width: 100%;
  height: 340px;
  margin-top 20px;
  padding 20px;
  box-sizing border-box;
  background: #FFFFFF;
  box-shadow: 0 4px 8px 0 rgba(25, 25, 26, 0.15), 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 12px;
}

.bottomList P {
  margin-bottom: 20px;
}

.seeDetail {
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #4B82FB;
  text-align: right;
  float right
}
.no-data{
  text-align center
  font-size 14px
}
</style>
